﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="AnalyticsAPI.aspx.cs" Inherits="WebFormsSample.AnalyticsAPI" %>

<%@ Import Namespace="ActivityTrackingLog.Web.Helpers" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Statistics API Sample
    </h2>
    <p>
        This page emulates a client consuming JSON datasource from ActivityTrackingLod API.
        The call is executed using jQuery asynd calls function. resut is displayed into
        page layout as text however in real life you can bind it into a data contol as a
        JSON datasource or pre-process before visualising.
    </p>
    <h2>
        Source code:
    </h2>
    <p>
        <img class="max-width" src="../Img/analytics_api_call_example.PNG" />
    </p>
    <h2>
        Working Example:
    </h2>
    <table class="settings">
        <thead>
            <tr>
                <td class="set-width">
                    Entity Type
                </td>
                <td class="set-width">
                    Report Type
                </td>
                <td class="set-width">
                    Page Size
                </td>
                <td class="set-width">
                    Page Index
                </td>
                <td class="auto-width">
                    Columns (CSV)
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="set-width">
                    <select class="changeable" id="ddlEntityType">
                        <option value="ActivityItem">ActivityItem</option>
                        <option value="UserAgentItem">UserAgentItem</option>
                    </select>
                </td>
                <td class="set-width">
                    <select class="changeable" id="ddlReportType">
                        <option value="list">List</option>
                        <option value="groupedlist">Grouped List</option>
                        <option value="chart">Chart</option>
                    </select>
                </td>
                <td class="set-width">
                    <input class="changeable" type="text" id="txtPageSize" value="25" />
                </td>
                <td class="set-width">
                    <input class="changeable" type="text" id="txtPageIndex" value="0" />
                </td>
                <td class="auto-width">
                    <input type="text" id="txtColumns" value="" />
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <input type="button" id="btnReload" value="Reload Data" />
                </td>
            </tr>
        </tbody>
    </table>
    <h2>
        JSON Output:
    </h2>
    <div class="margin-top" id="statistics_control_container">
    </div>
    <script type="text/javascript">
        $(function () {
            logClientSideActivity('AnalyticsAPILoaded');

            $('.changeable').change(function () { fillColumns(); });
            $('#btnReload').click(function () { loadControl(); });

            fillColumns();
            loadControl();
        })

        function fillColumns() {
            var entityType = $('#ddlEntityType option:selected').val();
            var reportType = $('#ddlReportType option:selected').val();
            var cols = "";

            switch (reportType) {
                case 'list':
                    cols = entityType == 'ActivityItem' ?
                        'Sequence,TimeUtc,ActivityType,Category,Activity,UserKey,ClientHost,PageUrl' :
                        'Sequence,Hash,AgentString';
                    break;
                case 'groupedlist':
                    cols = entityType == 'ActivityItem' ?
                        'ActivityType,Category,Activity,PageUrl,Count' :
                        'Hash,AgentString,Count';
                    break;
                case 'chart':
                    cols = '';
                    break;
            }

            $('#txtColumns').val(cols);
        }

        function loadControl() {
            var data = {
                entity: $('#ddlEntityType option:selected').val(),
                view: 'control',
                report: $('#ddlReportType option:selected').val(),
                page_size: $('#txtPageSize').val(),
                page_index: $('#txtPageIndex').val(),
                cols: $('#txtColumns').val()
            };
            $("#statistics_control_container")
                .load("/ActivityAnalytics/ActivityAnalyticsAPI.axd", data);
        }
    </script>
</asp:Content>
